<script setup lang="ts">
import { reactive } from 'vue';
import Board from '../../components/board.vue'
import Rotate from '../../components/rotate.vue'
import Gforce from '../../components/gforce.vue'
import Suspension from '../../components/suspension.vue'

const ipcRenderer = eval('require("electron").ipcRenderer')

const boardData = reactive({
  speed: 0,
  throttle: 0,
  steer: 0,
  brake: 0,
  clutch: 0,
  rate: 0,
  max_rate: 700,
  rate_gate: 8.5,
  gear: 0,
  max_gear: 0
})

const rotate = reactive({
  x: 0,
  y: 0,
  fx: false,
  fy: false
})

const gforce = reactive({
  lat: 0,
  long: 0
})

const suspension = reactive({
  bl: 0,
  br: 0,
  fl: 0,
  fr: 0
})

const txt = reactive({
  roll: {
    x: 0,
    y: 0,
    z: 0
  },
  pitch: {
    x: 0,
    y: 0,
    z: 0
  },
  susPos: {
    bl: 0,
    br: 0,
    fl: 0,
    fr: 0
  },
  susVol: {
    bl: 0,
    br: 0,
    fl: 0,
    fr: 0
  }
})

ipcRenderer.on('data', (_: any, buffer: Uint8Array) => {
  const dv = new DataView(buffer)
  parse(dv)
})

function parse(dv: DataView) {
  boardData.rate_gate = dv.getUint8(1) / 10
  // 当前挡位
  boardData.gear = dv.getInt8(2)
  // 最大挡位
  boardData.max_gear = dv.getUint8(3)
  // 方向盘位置
  boardData.steer = dv.getFloat32(4, true)
  // 油门位置
  boardData.throttle = dv.getFloat32(8, true)
  // 刹车位置
  boardData.brake = dv.getFloat32(12, true)
  // // 离合位置
  boardData.clutch = dv.getFloat32(16, true)
  // 速度
  boardData.speed = dv.getFloat32(20, true)
  // 当前功率
  boardData.rate = dv.getFloat32(28, true)
  // 当前挡位最大功率
  boardData.max_rate = dv.getFloat32(32, true)

  // G力 侧向
  gforce.lat = dv.getFloat32(36, true)
  // G力 前进方向
  gforce.long = dv.getFloat32(40, true)
  // 侧向翻转角度 顺时针为负值
  rotate.y = dv.getFloat32(44, true) * 180 / Math.PI
  // 前后倾斜角度 后仰为负
  rotate.x = dv.getFloat32(48, true) * 180 / Math.PI
  // 减震位置 幅值 -1~1
  suspension.fl = dv.getFloat32(68, true)
  suspension.fr = dv.getFloat32(72, true)
  suspension.bl = dv.getFloat32(76, true)
  suspension.br = dv.getFloat32(80, true)
}

let lastPointerTime = 0
let isFullscreen = false
function onUp() {
  if (Date.now() - lastPointerTime < 200) {
    if (!isFullscreen) {
      document.body.requestFullscreen?.()
    } else {
      document.exitFullscreen?.()
    }
    isFullscreen = !isFullscreen
  }
  lastPointerTime = Date.now()
}

</script>

<template>
  <div class="dashboard">
    <Board :data="boardData" />
    <Rotate :data="rotate" />
    <Gforce :data="gforce" />
    <Suspension :data="suspension" />

    <!-- <div class="txt">{{ txt.susPos.bl.toFixed(1) }}/{{ txt.susPos.br.toFixed(1) }}/{{ txt.susPos.fl.toFixed(1) }}/{{
        txt.susPos.fr.toFixed(1)
    }}</div>
    <div class="txt" style="margin-top: 2rem">
      {{ txt.susVol.bl.toFixed(1) }}/{{ txt.susVol.br.toFixed(1) }}/{{ txt.susVol.fl.toFixed(1) }}/{{
          txt.susVol.fr.toFixed(1)
      }}
    </div> -->
    <!-- <div class="txt" style="margin-top: 2rem">
      {{ rotate.x.toFixed(2) }}  {{rotate.y.toFixed(2)}}
    </div> -->
  </div>
</template>

<style lang="less">
.dashboard {
  background: rgba(0, 0, 0, 0.95);
}

.txt {
  position: absolute;
  right: 2rem;
  top: 2rem;
  font-size: 2rem;
  color: #F00;
}
</style>
